/* */
.tab-container {
  background-color: #fff;
  padding:0 10px;
  box-shadow: 0 0 8px #ccc;
  position: relative;
}
.tab-wrap {
  background-color: #fff;
  margin:0 0 10px 0;
}
.tab-wrap .tab {
  width:100%;
  height:52px;
  line-height: 52px;
  background-color:#fff;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
}
.tab-wrap .tab li {
  display: flex;
  padding:0 20px;
  position: relative;
  cursor: pointer;
  
}
.tab-wrap .tab li.active,
.tab-wrap .tab li:hover {
  color:#39a3f9;
}
.tab-wrap .tab li:before {
  content:'';
  width:1px;
  height:24px;
  background-color: #dbdbdb ;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  right:0;
}
.tab-wrap .tab li .num {
  position: absolute;
  right:0;
  width:20px;
  height:20px;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  color:#fff;
  background-color:#ff696a;
  top:50%;
  transform: translateY(-50%);
  right:4px;
  border-radius: 50%;
}

.pop-menu {
  display: none;
  padding:20px 30px;
  position: absolute;
  left:10px;
  right:10px;
  top:42px;
  z-index:100;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.pop-menu.active {
  display: block;
}
.pop-menu dl {
  /* margin-bottom:10px; */
  display: flex;
  margin-bottom:10px;
}
.pop-menu dl dt {
  margin-right:20px;
  cursor: pointer;
  /* width:200px; */
  display: block;
}
.pop-menu dl dt:hover a{
  color: #39a3fb;
}

.pop-menu dl dd{
  flex: 1;
}
.pop-menu dl dd a {
  margin-right:10px;
  position: relative;
  padding-left:20px;
  display: inline-block;
}
.pop-menu dl dd a:active,
.pop-menu dl dd a:hover {
  color: #39a3fb;
}
.pop-menu dl dd a:before {
  content:'';
  position: absolute;
  width:5px;
  height:5px;
  border-radius: 50%;
  background-color: #39a3fb;
  top:50%;
  left:0;
  transform: translateY(-50%);
}
.pop-menu dl dd a .num {
  color:#ff7270;
}